<template>
  <div class="button">
    <template v-if="buttonType === 'search'">
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleClick">
        <slot>搜索</slot>
      </el-button>
    </template>

    <template v-else-if="buttonType === 'refresh'">
      <el-button icon="el-icon-refresh" size="mini" @click="handleClick">
        <slot>重置</slot>
      </el-button>
    </template>

    <template v-else-if="buttonType === 'add'">
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleClick"
        :disabled="buttonDisabled"
      >
        <slot>新增</slot>
      </el-button>
    </template>

    <template v-else-if="buttonType === 'delete'">
      <el-button type="danger" plain icon="el-icon-delete" size="mini"
        :disabled="buttonDisabled"
        @click="handleClick"
      >
        <slot>删除</slot>
      </el-button>
    </template>
  </div>
</template>

<script>
  export default {
    name: "index.vue",
    props: {
      buttonType: {
        type: String,
        default: 'search'
      },
      buttonDisabled: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      handleClick() {
        this.$emit("handleClick", {});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .button {
    display: inline-block;

    button {
      margin-right: 10px;
    }
  }
</style>
